<template>
  <div class="lang">
    <span title="a" :class="['iconfont', lang]" @click="toggleLang"></span>
  </div>
</template>

<script>
import cookie from 'js-cookie'
export default {
  data() {
    return {
      locale: cookie.get('locale') || 'zh'
    }
  },
  computed: {
    lang: {
      get() {
        return this.locale === 'zh' ? 'hr-yuyan' : 'hr-zhongwen'
      },
      set(value) {
        this.locale = value
      }
    }
  },
  methods: {
    toggleLang() {
      if (this.locale === 'zh') {
        this.locale = 'en'
        this.$i18n.locale = 'en'
        this.$router.go(0)
        cookie.set('locale', 'en')
      } else {
        this.locale = 'zh'
        this.$i18n.locale = 'zh'
        this.$router.go(0)
        cookie.set('locale', 'zh')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.lang {
  .iconfont {
    font-size: 20px;
    .hr-zhongwen {
      font-size: 16px;
    }
  }
}
</style>